<script>
const theme = [
  { name: 'light', label: '极简白' },
  { name: 'dark', label: '极夜黑' },
  { name: 'system', label: '跟随系统' }
]
</script>
<script setup>
import SvgIcon from '../../../components/SvgIcon.vue'
import Popover from '../../../libs/Popover/Popover.vue'
import { useStore } from 'vuex'
const store = useStore()
//改变主题
const changeTheme = (name) => {
  store.commit('themes/setTheme', name)
}
</script>
<template>
  <Popover>
    <SvgIcon name="theme-light" class="w-8 h-8 dark:fill-red-700" />
    <template #content>
      <ul class="w-32 p-2 bg-slate-200 rounded-md">
        <li
          v-for="item in theme"
          class="flex mb-2"
          @click="changeTheme(item.name)"
        >
          <SvgIcon :name="`theme-${item.name}`" class="w-6 h-6 mr-2" />
          <span class="flex-1">{{ item.label }}</span>
        </li>
      </ul>
    </template>
  </Popover>
</template>
